<template>
  <view>
    <view
      v-if="pageData && pageData.app_path_set_dt.length > 0"
      class="make-coins-wrap card-wrap"
      :style="{
        backgroundColor: pageData.bg_color || '#FFF'
      }"
    >
      <view class="card-title" :style="{color: pageData.color || '#000'}">{{ pageData.title || '赚青币' }}</view>
      <view class="cells-wrap">
        <view v-for="item in pageData.app_path_set_dt" :key="item.id" class="cell">
          <view class="left">
            <view class="title">
              <view class="flag" />
              <view class="value">{{ item.title }}</view>
              <view class="coin-wrap">
                <!-- <view class="coin-icon">
									<u-icon bold name="rmb" color="#000" size="12" />
								</view> -->
                <image src="../../../static/images/points/coin_14x14.png" style="width: 14px;height:14px;" />
                <text class="value">{{ item.text2 }}</text>
              </view>
            </view>
            <view class="sub-title">{{ item.text1 }}</view>
          </view>
          <view v-if="item.url != 'share' && item.active" class="action-btn" @click="onAction(item)">
            <text class="btn-text">{{ item.text3 }}</text>
            <u-icon bold name="arrow-right" color="#000" size="12" />
          </view>

          <view v-else class="action-btn action-disabled">
            <text class="btn-text">{{ item.text3 }}</text>
            <u-icon bold name="arrow-right" color="#000" size="12" />
          </view>

          <!-- 	<view v-else-if="item.url == 'share'" class="action-btn">
						<text class="btn-text">{{ item.text3 }}</text>
						<u-icon bold name="arrow-right" color="#000" size="15" />
						<button open-type="share" class="share"></button>
					</view> -->
        </view>
      </view>
    </view>
    <view v-else />
    <u-popup :show="popupShow" mode="center" :round="10" :safe-area-inset-bottom="false" @close="popupShow = false">
      <view class="popup-content">
        <view class="title">青丝几何 发量小官</view>
        <u-image :src="barcodeImg" width="200" height="200" />
        <view class="desc">长安二维码添加你的发量守护官</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  execFn,
  getCurrentPageConfigByName
} from '../../../utils/index'
import barcodeTestImg from '@/static/images/barcode-test.png'
export default {
  name: 'MakeCoins',
  props: {
    reward_list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      pageData: null,
      popupShow: false,
      barcodeImg: barcodeTestImg
    }
  },
  watch: {
    reward_list: {
      handler(list) {
        setTimeout(() => {
          if (this.pageData && list && list.length) {
            this.pageData.app_path_set_dt.forEach(item => {
              const obj = list.find(l => l.task_name == item.name)
              if (obj) {
                // 一次性奖励
                if (obj.reward_type == 1) {
                  this.$set(item, 'num', obj.total_num || 0)
                }
                // 每日奖励
                if (obj.reward_type == 2) {
                  this.$set(item, 'num', obj.today_num || 0)
                }

                this.$set(item, 'times', obj.times || 0)
                if (item.num >= item.times) {
                  this.$set(item, 'active', false)
                } else {
                  this.$set(item, 'active', true)
                }
              }
            })
          }
        }, 500)
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('赚青币').then(res => {
        _this.pageData = res
        console.log('赚青币---模块配置数据')
        console.log(res)
      })
    },
    onAction(data) {
      const {
        url
      } = data
      if (url) {
        if (url == 'qyQrcodePopup') {
          this.popupShow = true
          return
        }
        execFn(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.make-coins-wrap {
		margin-bottom: 20rpx;
		padding-bottom: 0;

		.card-title {
			font-size: 32rpx;
			font-weight: bolder;
			padding-bottom: 26rpx;
		}

		.cells-wrap {
			.cell {
				@include flex-between;
				border-top: 1px solid #e6e6e6;
				padding: 20rpx 8rpx;

				.left {
					.title {
						@include flex-column-center;
						gap: 10rpx;

						.flag {
							width: 18rpx;
							height: 18rpx;
							border-radius: 50%;
							background-color: $theme-color;
						}

						.value {
							font-weight: bolder;
							font-size: 28rpx;
						}

						.coin-wrap {
							@include flex-column-center;
							gap: 5rpx;

							.coin-icon {
								width: 35rpx;
								height: 35rpx;
								border-radius: 50%;
								@include flex-center;
								background-color: #fff36d;
							}

							.value {
								font-size: 22rpx;
							}
						}
					}

					.sub-title {
						color: rgba(0, 0, 0, 0.5);
						font-size: 20rpx;
						padding: 0 0 0 32rpx;
					}
				}

				.action-disabled {
					background-color: #f2f2f2 !important;
				}

				.action-btn {
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 12rpx 0 18rpx;
					// padding-left: 15rpx;
					@include flex-column-center;
					gap: 10rpx;
					font-size: 28rpx;
					font-weight: bolder;
					border-radius: 50rpx;
					background-color: $theme-color;
					width: max-content;
					position: relative;

					.share {
						position: absolute;
						left: 0;
						top: 0;
						background: transparent;
						border: none;
						width: 100%;
						height: 100%;
					}

					.share::after {
						border: none;
					}
				}
			}
		}
	}

	.popup-content {
		width: 80vw;
		height: 40vh;
		padding: 0 20rpx;
		@include flex-center;
		flex-flow: column;

		.title {
			font-size: 32rpx;
			padding-bottom: 40rpx;
		}

		.desc {
			font-size: 32rpx;
			padding-top: 30rpx;
		}
	}
</style>
